Learn how to create a stunning CSS animated neon button. Add a glowing button effect with smooth animations to make your website more attractive and engaging.
Table of Contents
A neon button is a button element in a webpage or application that is designed to have a glowing or neon appearance. It is typically created using HTML and CSS, and it may use the box-shadow property and the text-shadow property to create the glowing effect.
Neon buttons are often used to draw attention to a particular action or feature on a webpage or application. They can be used to indicate a call-to-action, such as inviting the user to click a button to submit a form or make a purchase.
Neon buttons are typically used to add a visually striking or futuristic touch to a design. They are often used in conjunction with other neon or futuristic design elements, such as neon text or neon backgrounds. In this tutorial, we will go through the steps required to create an animated neon button for your website using CSS.
Let's start making an amazing animated neon button Using HTML and CSS step by step.
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To create a neon button using HTML and CSS, you can use a combination of the 'a' tag, the animation property, and the @keyframes rule. Below is a breakdown of its structure:
1. Basic Document Setup
- The
<!DOCTYPE html>declares that the document is an HTML5 file. <html lang="en">defines the language as English.<head>contains metadata like:<title>: Sets the webpage title as "Animated Neon Button".<meta charset="UTF-8" />: Ensures proper character encoding.<meta name="viewport" content="width=device-width" />: Makes the webpage responsive for different devices.<link rel="stylesheet" href="styles.css" />: Links an external CSS file (styles.css) for styling.
2. Body Content
<a href="#" class="neon-loader">
<span>Click!</span>
</a><a href="#">: Creates a hyperlink (styled as a button) that doesn’t navigate anywhere (# is a placeholder).- class="neon-loader": Assigns a class to the
<a>element so CSS can style it as a neon button. <span>Click!</span>: The button text.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our neon effect. Let's break it down step by step:
1. Body Styling
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #262626;
}- display: flex;: Uses Flexbox to center the button both horizontally and vertically.
- justify-content: center;: Centers content horizontally.
- align-items: center;: Centers content vertically.
- height: 100vh;: Makes the body take up the full-screen height.
- background: #262626;: Sets a dark background color.
2. Neon Button Styling
.neon-loader {
display: flex;
align-items: center;
justify-content: center;
width: 8rem;
height: 3rem;
border-radius: 20px;
background-color: #00ffff;
text-decoration: none;
animation: neon-loader 1s infinite alternate;
}- display: flex; align-items: center; justify-content: center;: Centers the button text inside the button.
- width: 8rem; height: 3rem;: Defines button size.
- border-radius: 20px;: Rounds the button corners.
- background-color: #00ffff;: Initial button color (cyan).
- text-decoration: none;: Removes underline from the link.
- animation: neon-loader 1s infinite alternate;: Applies the animation that changes the button color.
3. Hover Effect (When Mouse Hovers Over the Button)
.neon-loader:hover {
background-color: #00ffff !important;
animation-play-state: paused;
box-shadow: 0 0 10px #00ffff,
0 0 30px #00ffff,
0 0 60px #00ffff;
}- background-color: #00ffff !important;: Ensures the button remains cyan when hovered.
- animation-play-state: paused;: Stops the color animation on hover.
- box-shadow: Creates a glowing neon effect:
- 0 0 10px #00ffff → Small glow
- 0 0 30px #00ffff → Medium glow
- 0 0 60px #00ffff → Large glow
4. Button Text Styling
span {
font-size: 2em;
color: #000;
}- font-size: 2em;: Makes the text larger.
- color: #000;: Sets the text color to black for contrast.
5. Neon Animation (Color Transition)
@keyframes neon-loader {
from {
background-color: #00ffff;
}
to {
background-color: #ff00ff;
}
}- This animation switches the button color:
- Starts at #00ffff (cyan).
- Ends at #ff00ff (magenta).
- Runs continuously (1s infinite alternate).
This will give our neon button an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #262626;
}
.neon-loader {
display: flex;
align-items: center;
justify-content: center;
width: 8rem;
height: 3rem;
border-radius: 20px;
background-color: #00ffff;
text-decoration: none;
animation: neon-loader 1s infinite alternate;
}
.neon-loader:hover{
background-color: #00ffff !important;
animation-play-state: paused;
box-shadow: 0 0 10px #00ffff,
0 0 30px #00ffff,
0 0 60px #00ffff;
}
span{
font-size: 2em;
color: #000;
}
@keyframes neon-loader {
from {
background-color: #00ffff;
}
to {
background-color: #ff00ff;
}
} Final Output:
Conclusion:
In conclusion, creating an animated neon button can be a great addition to your website and can help draw attention to important calls to action. By following the steps outlined in this tutorial, you can easily create an animated neon button using CSS. Remember to experiment with different colors and animations to make your button unique and eye-catching. We hope you found this tutorial helpful and that you are now able to create your own animated neon buttons for your website.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
